@mixin gradual-change-border($bgColor, $width, $position: 'left'){
  position: relative;
  overflow: hidden;
  z-index: 2;
  @if($position == 'left'){
    &{
      border-left: none;
    }
    &::before{
      left: 0;
    }
  } @else if($position == 'right'){
    &{
      border-right: none;
    }
    &::before{
      right: 0;
    }
  }
  &::before{
    content: '';
    width: $width;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    background: $bgColor;
  }
}